<template>

    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="年">
            <el-date-picker v-model="form.SHowyear" type="year" placeholder="请选择" />
        </el-form-item>

        <el-form-item label="用户名称">
            <el-input v-model="form.userName" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="Show">查询</el-button>
        </el-form-item>
    </el-form>
    <el-button type="success" plain @click="dialogFormVisible = true">
        导出
    </el-button>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userName" label="姓名\请假月份" width="180" fixed />

        <!-- 动态生成月份列 -->
        <el-table-column v-for="month in months" :key="month" :label="`${month}月`" width="120">
            <template #default="{ row }">
                <p v-if="getMonthHours(row, month) == 0">{{ getMonthHours(row, month) }}</p>
                <el-link plain v-else style="color: red;" @click="OpengetYearMonth(row, month)">{{ getMonthHours(row,
                    month)
                }}</el-link>
            </template>
        </el-table-column>



    </el-table>

    <el-dialog v-model="dialogFormVisible" title="导出" width="500">
        <el-form :model="form">
            <el-form-item label="年">
                <el-date-picker v-model="form.year" type="year" placeholder="请选择" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="Export()">
                    导出
                </el-button>
            </div>
        </template>
    </el-dialog>


    <el-dialog v-model="dialogTableVisible" title="详情" style="width: 1000px;height: 500px;">
        <el-table :data="UserLeaveData">
            <el-table-column type="index" label="编号" />
            <el-table-column prop="userName" label="姓名" />
            <el-table-column prop="deptName" label="部门" />
            <el-table-column prop="typeEnumsName" label="请假类别" />
            <el-table-column prop="leaveTIme" label="请假时间" width="200px">
                <template v-slot="scoped">
                    <text>{{ scoped.row.leaveTIme.toString().substring(0, 10) }}</text>至 <text>{{
                        scoped.row.reportTIme.toString().substring(0, 10) }}</text>
                </template>
            </el-table-column>
            <el-table-column prop="sumTime" label="总工时" />
            <el-table-column prop="reportTIme" label="报道时间">
                <template v-slot="scoped">
                    {{ moment(scoped.row.reportTIme).format("YYYY-MM-DD") }}
                </template>
            </el-table-column>
            <el-table-column prop="typeEnumsName" label="请假事由" />
            <el-table-column prop="deptBoos" label="部门领导" />
            <el-table-column prop="state" label="审核状态">
                <template v-slot="scoped">
                    {{ scoped.row.state == false ? "待审核" : "已审核" }}
                </template>
            </el-table-column>
            <el-table-column prop="isResult" label="审核结果" />
            <el-table-column prop="resultDesc" label="审核原因" />
            <el-table-column prop="createTime" label="创建日期" width="100px">
                <template v-slot="scoped">
                    {{ moment(scoped.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>


        </el-table>

        <el-pagination v-model:current-page="userInfo.PageIndex" v-model:page-size="userInfo.PageSize"
            :page-sizes="[15, 20, 25, 30]" :background="true
                " layout="total, sizes, prev, pager, next, jumper" :total="userInfo.count" prev-text="上一页"
            next-text="下一页" />
    </el-dialog>
</template>

<script lang="ts" setup>

import { onMounted, ref, reactive, watch } from 'vue'
import { readB } from '@/http/axiosHelper'
import axios from 'axios'
import moment from 'moment'
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const tableData = ref([])


const dialogFormVisible = ref(false)
const dialogTableVisible = ref(false)

//导出
const Export = () => {

    if (form.year != "") {

        form.year1 = Number(new Date(form.year).getFullYear())
    }


    location.href = "http://localhost:5291/api/Leave/ExportData?year=" + form.year1
    dialogFormVisible.value = false;
}


const form: any = reactive({
    SHowyear: "",
    SHowyear1: "",
    year: "",
    year1: "",
    userName: ""
})


const Show = () => {

    if (form.SHowyear != "" && Number(new Date(form.SHowyear).getFullYear()) != 1970) {

        form.SHowyear1 = Number(new Date(form.SHowyear).getFullYear())
    }
    else {
        form.SHowyear1 = 2025
    }

    readB.get("/api/Leave/GetLeaveTable", {
        params: {
            year: form.SHowyear1,
            userName: form.userName
        }
    })
        .then(res => {
            tableData.value = res.data.pageData;
            console.log(tableData.value);

        })
}
const getMonthHours = (row: any, month: number) => {
    const summary = row.monthlySummaries.find((m: { month: number }) => m.month === month)
    return summary ? summary.totalLeaveHours : 0
}

const userInfo = ref({
    UserId: "",
    Year: "",
    Month: "",
    PageIndex: 1,
    PageSize: 15,
    count: 0
})

const UserLeaveData = ref([])

//点击高亮 显示详情
const OpengetYearMonth = async (row: any, month: any) => {
    userInfo.value.Year = row.monthlySummaries.find((s: { month: number }) => s.month === month).year
    userInfo.value.UserId = row.userId;
    userInfo.value.Month = month

    await getYearMonth()
    dialogTableVisible.value = true

}

const getYearMonth = () => {
    readB.get("/api/Leave/GetOneUserLeave", {
        params: {
            UserId: userInfo.value.UserId,
            Year: userInfo.value.Year,
            Month: userInfo.value.Month,
            PageIndex: userInfo.value.PageIndex,
            PageSize: userInfo.value.PageSize,
        }
    })
        .then(res => {
            UserLeaveData.value = res.data.pageData;
            console.log(UserLeaveData.value);

            userInfo.value.count = res.data.count
        })
}



watch(() => { userInfo.value.PageIndex, userInfo.value.PageSize }, () => {
    getYearMonth();
}, { deep: true });

onMounted(() => {
    Show();
})
</script>